// watermark.ts
import {onMounted, onUnmounted} from 'vue';

type WatermarkOptions = {
    text?: string; // 文本水印内容
    imageUrl?: string; // 图片水印 URL
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; // 水印位置
    container?: HTMLElement; // 水印容器，默认为 document.body
};

export function useWatermark(options: WatermarkOptions) {
    const {text, imageUrl, position = 'bottom-right', container = document.body} = options;

    let observer: MutationObserver | null = null;

// 创建水印元素
    const createWatermark = () => {
        const watermarkElement = document.createElement('div');
        watermarkElement.style.position = 'absolute';
        watermarkElement.style.zIndex = '9999';
        watermarkElement.style.pointerEvents = 'none'; // 防止水印干扰用户交互
        watermarkElement.style.opacity = '0.5'; // 透明度

// 根据位置设置样式
        switch (position) {
            case 'top-left':
                watermarkElement.style.top = '10px';
                watermarkElement.style.left = '10px';
                break;
            case 'top-right':
                watermarkElement.style.top = '10px';
                watermarkElement.style.right = '10px';
                break;
            case 'bottom-left':
                watermarkElement.style.bottom = '10px';
                watermarkElement.style.left = '10px';
                break;
            case 'bottom-right':
                watermarkElement.style.bottom = '10px';
                watermarkElement.style.right = '10px';
                break;
        }

// 设置水印内容
        if (text) {
            watermarkElement.style.fontSize = '16px';
            watermarkElement.style.color = '#ccc';
            watermarkElement.innerText = text;
        } else if (imageUrl) {
            const img = document.createElement('img');
            img.src = imageUrl;
            img.style.width = '100px';
            img.style.height = 'auto';
            watermarkElement.appendChild(img);
        }

// 清理旧水印并添加新水印
        const oldWatermark = container.querySelector('.watermark');
        if (oldWatermark) {
            container.removeChild(oldWatermark);
        }
        watermarkElement.classList.add('watermark');
        container.appendChild(watermarkElement);
    };

// 监听 DOM 变化以防止篡改
    const startObserver = () => {
        observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (
                    mutation.type === 'childList' &&
                    Array.from(mutation.removedNodes).some((node) => node instanceof HTMLElement && node.classList.contains('watermark'))
                ) {
                    console.warn('水印被移除，重新渲染...');
                    createWatermark();
                }
            }
        });

        observer.observe(container, {childList: true, subtree: true});
    };

// 初始化水印
    const init = () => {
        createWatermark();
        startObserver();
    };

// 清理资源
    const destroy = () => {
        if (observer) {
            observer.disconnect();
            observer = null;
        }
        const watermarkElement = container.querySelector('.watermark');
        if (watermarkElement) {
            container.removeChild(watermarkElement);
        }
    };

    onMounted(() => {
        init();
    });

    onUnmounted(() => {
        destroy();
    });

    return {init, destroy};
}